{{template "header" .}}
<div class="me-logo">
    <div class="icon">
        <span class="iconfont icon-xingming"></span>
    </div>
    <div class="text">
        <span>{{.user.name}}</span>
    </div>
</div>
<ul class="item-list">
    <li>
        <div class="label">性别</div>
        <div class="value">{{.user.sex}}</div>
    </li>
    <li>
        <div class="label">父</div>
        <div class="value">{{.user.parent_name}}</div>
    </li>
    <li data-field-name="spouse">
        <div class="label">配偶</div>
        <div class="value">{{.user.spouse}}</div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
    <li data-field-name="birth" data-field-type="date">
        <div class="label">出生日期</div>
        <div class="value">{{.user.birth}}</div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
    <li data-field-name="address">
        <div class="label">居住地</div>
        <div class="value">{{.user.address}}</div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
    <li data-field-name="phone">
        <div class="label">电话</div>
        <div class="value">{{.user.phone}}</div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
    <li data-field-name="remark">
        <div class="label">备注</div>
        <div class="value">{{if ne .user.remark ""}}{{.user.remark}}{{else}}-{{end}}</div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
    <li onclick="window.location.href='/m/me/tree'">
        <div class="label">后代关系图</div>
        <div class="value"></div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
    <li data-field-name="password">
        <div class="label">修改密码</div>
        <div class="value"></div>
        <span class="tag iconfont icon-arrow-right-bold"></span>
    </li>
</ul>
<div class="btn" style="margin:30px 15px 0 15px;width: calc(100% - 30px);">
    <button onclick="window.location.href='/m/logout'">退出登录</button>
</div>

<div class="modal">
    <div class="body">
        <div class="form-item">
            <div class="label">修改<span>电话</span></div>
            <div class="input">
                <input type="text">
                <div class="btn small" style="width:80px">
                    <button>确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded',()=>{
        var modal = document.querySelector('.modal');
        document.querySelectorAll('.item-list li').forEach(li=>{
            li.addEventListener('click',ev=>{
                var fieldName = li.dataset.fieldName;
                if(fieldName){
                    var label = li.querySelector('.label').innerText;
                    var val = li.querySelector('.value').innerText;
                    if(val=='-'){
                        val = '';
                    }
                    var type = li.dataset.fieldType||'text';
                    if(fieldName=='password'){
                        label = label.replace('修改','')
                    }
                    modal.querySelector('.label span').innerText = label;
                    var input = modal.querySelector('.input input');
                    input.type = type;
                    input.value = val;
                    modal.showModal();
                    input.focus();
                    var button = modal.querySelector('.btn button');
                    button.onclick = function(){
                        ajax('/m/profile','post',{"field":fieldName,"value":input.value}).then(()=>{
                            alert('修改成功');
                            li.querySelector('.value').innerText = input.value;
                            modal.hide();
                        }).catch(e=>{
                            alert(e);
                        })
                    }
                }
            })
        })
    })
</script>
{{template "footer" .}}